<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box">
      <div class="item-table">
        <!-- header -->
        <section class="table_header">
          <ul class="flex">
            <li class="flex1">
              <span>名称</span>
            </li>
            <li class="flex1">
              <span>场次</span>
            </li>
            <li class="flex1">
              <span>进球数</span>
            </li>
            <li class="flex1">
              <span>失球数</span>
            </li>
            <li class="flex1">
              <span>胜负比</span>
            </li>
            <li class="flex1">
              <span>总得分</span>
            </li>
          </ul>
        </section>
        <!-- body -->
        <div class="table_body" ref="tableBody" style="height: 15.622rem" @click="changeScroll">
          <ul class="flex" v-for="(item,index) in tableData" :key="index">
            <li class="flex1">
              <span>{{ item.name }}</span>
            </li>
            <li class="flex1">
              <span>{{ item.session }}</span>
            </li>
            <li class="flex1">
              <span>{{ item.goalsFor }}</span>
            </li>
            <li class="flex1">
              <span>{{ item.goalsAgainst }}</span>
            </li>
            <li class="flex1">
              <span>{{ item.winLoseRate }}</span>
            </li>
            <li class="flex1">
              <span>{{ item.points }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cityBarChart",
  data() {
    return {
      tableData: [
        {
          name: '南通队',
          session: 7,
          win: 7,
          pin: 0,
          lose: 0,
          goalsFor: 19,
          goalsAgainst: 3,
          points: 21
        },
        {
          name: '徐州队',
          session: 8,
          win: 5,
          pin: 2,
          lose: 1,
          goalsFor: 12,
          goalsAgainst: 7,
          points: 17
        },
        {
          name: '盐城队',
          session: 7,
          win: 5,
          pin: 1,
          lose: 1,
          goalsFor: 14,
          goalsAgainst: 3,
          points: 16
        },
        {
          name: '南京队',
          session: 7,
          win: 4,
          pin: 2,
          lose: 1,
          goalsFor: 15,
          goalsAgainst: 4,
          points: 14
        },
        {
          name: '泰州队',
          session: 8,
          win: 4,
          pin: 1,
          lose: 3,
          goalsFor: 10,
          goalsAgainst: 12,
          points: 13
        },
        {
          name: '淮安队',
          session: 7,
          win: 3,
          pin: 2,
          lose: 2,
          goalsFor: 10,
          goalsAgainst: 5,
          points: 11
        },
        {
          name: '苏州队',
          session: 7,
          win: 2,
          pin: 4,
          lose: 1,
          goalsFor: 11,
          goalsAgainst: 7,
          points: 10
        },
        {
          name: '无锡队',
          session: 7,
          win: 3,
          pin: 1,
          lose: 3,
          goalsFor: 7,
          goalsAgainst: 6,
          points: 10
        },
        {
          name: '连云港队',
          session: 7,
          win: 2,
          pin: 2,
          lose: 3,
          goalsFor: 10,
          goalsAgainst: 11,
          points: 8
        },
        {
          name: '宿迁队',
          session: 8,
          win: 1,
          pin: 3,
          lose: 4,
          goalsFor: 7,
          goalsAgainst: 12,
          points: 6
        },
        {
          name: '扬州队',
          session: 7,
          win: 1,
          pin: 1,
          lose: 5,
          goalsFor: 6,
          goalsAgainst: 16,
          points: 4
        },
        {
          name: '镇江队',
          session: 8,
          win: 1,
          pin: 0,
          lose: 7,
          goalsFor: 3,
          goalsAgainst: 20,
          points: 3
        },
        {
          name: '常州队',
          session: 8,
          win: 0,
          pin: 1,
          lose: 7,
          goalsFor: 0,
          goalsAgainst: 18,
          points: 1
        }
      ],
      scrollInterval: null, // 用于存储滚动定时器
      scrollSpeed: 30, // 滚动速度（毫秒）
      scrollStep: 1, // 每次滚动的像素数
      auto: true,
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '苏超联赛数据对比'
    },
    scrollDelay: {
      type: Number,
      default: 0 // 开始滚动前的延迟（毫秒）
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    // 等待DOM渲染完成后开始自动滚动
    if (this.auto) {
      setTimeout(() => {
        this.startAutoScroll();
      }, this.scrollDelay);
    }
  },
  beforeUnmount() {
    this.stopAutoScroll();
  },
  methods: {
    initData() {
      if (this.tableData.length !== 0) {
        this.tableData.map((item) => {
          item.winLoseRate = item.win + '-' + item.pin + '-' + item.lose
        })
      }
    },
    changeScroll() {
      this.auto = !this.auto
      this.auto ? this.startAutoScroll() : this.stopAutoScroll()
    },

    // 开始自动滚动
    startAutoScroll() {
      // 先停止可能存在的滚动
      this.stopAutoScroll();

      // 获取滚动容器
      const container = this.$refs.tableBody;
      if (!container) return;

      // 检查是否需要滚动（内容高度是否超过容器高度）
      if (container.scrollHeight <= container.clientHeight) {
        return;
      }

      // 开始自动滚动
      this.scrollInterval = setInterval(() => {
        // 如果滚动到底部，重置到顶部
        if (container.scrollTop >= (container.scrollHeight - container.clientHeight)) {
          container.scrollTop = 0;
        } else {
          // 否则继续向下滚动
          container.scrollTop += this.scrollStep;
        }
      }, this.scrollSpeed);
    },

    // 停止自动滚动
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },

    // 重新开始滚动
    restartAutoScroll() {
      this.stopAutoScroll();
      if (this.auto) {
        setTimeout(() => {
          this.startAutoScroll();
        }, this.scrollDelay);
      }
    }
  }
}
</script>

<style scoped lang="scss">
$easeTimer: 1;
@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

.item-title {
  color: white;
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.item-box {
  width: 100%;
  height: 87.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .item-table {
    width: 97.5%;
    height: 95%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: .2rem;
    display: flex;
    flex-direction: column;

    .table_header {
      width: 100%;
      flex: 0 0 auto; // 不伸缩，保持固定高度
      height: 15%;

      ul {
        list-style: none;
        height: 100%;
        padding-inline-start: 0 !important;
        color: rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        margin: 0;

        li {
          margin-top: .5rem;
          display: flex;
          justify-content: center;
          align-content: center;
        }
      }

      .flex {
        display: flex;
      }
    }

    .table_body {
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      width: 100%;

      ::v-deep {
        .el-scrollbar__bar {
          bottom: 0px;
        }

        .el-scrollbar__wrap {
          height: 49px;
        }
      }

      .flex {
        display: flex;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0;
        color: rgba(255, 255, 255, 0.5);

        li {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0.25rem 0;
        }
      }
    }
  }
}

.flex1 {
  flex: 1;
}
</style>